<template>
  <div class="radiogroup-item component-item" :style="{paddingLeft: data.config.labelWidth}">
    <label
      class="component-label"
      :style="{width: data.config.labelWidth}"
    >{{data.config.labelName}}</label>
    <RadioGroup :value="data.value" @on-change="changeValue">
      <Radio
        v-for="check of (view ? options : data.config.options)"
        :key="check.label"
        :value="check.value"
        :label="check.label"
        :size="data.config.size"
        :disabled="data.config.disabled"
        :class="{'radio-border':data.config.border}"
        :style="{'marginRight': data.config.marginRight + 'px'}"
      ></Radio>
    </RadioGroup>
  </div>
</template>

<script>
import { getSourceData } from '../common'
export default {
  props: ['data', 'index', 'file', 'view'],
  data () {
    return {
      options: []
    };
  },
  watch: {
    'file.extend' () {
      this.dataHandle()
    }
  },
  methods: {// 数据处理
    dataHandle () {
      this.options = [];
      if (this.file) {
        let { databinding } = this.data;
        let { extend } = this.file;
        if (databinding && extend) {
          try {
            let options = getSourceData(extend, databinding);
            this.options = Array.isArray(options) ? options : []
          } catch (e) {
            console.log(e);
            this.$Message.error('数据获取出错');
          }
        }
      }
    },

    // 值更新
    changeValue (value) {
      this.$emit('updateResult', {
        value,
        index: this.index
      });
    }
  },
  created () {
    this.dataHandle();
  }
};
</script>

<style lang="less" scope>
.ivu-radio-group {
  line-height: 32px;
  .radio-border {
    border: #ebebeb 1px solid;
    padding: 0 4px;
    border-radius: 2px;
  }

  .ivu-radio-wrapper-checked.radio-border {
    border: #2d8cf0 1px solid;
  }
}

.component-item {
  position: relative;
  label.component-label {
    display: inline-block;
    text-align: left;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 32px;
  }
}
</style>
